<template>
  <el-row :gutter="20">
    <el-col :span="5"
      style="padding: 20px 20px 10px; box-shadow: 0px 0px 5px -3px; border-radius: 20px; max-height: 380px;">
      <el-form :form="form" label-width="70px">
        <el-form-item label="标题">
          <el-input v-model.trim="form[0].value" />
        </el-form-item>
        <el-form-item label="组别">
          <el-select v-model="form[1].value" placeholder="请选择组别">
            <el-option label="全部" :value="''" />
            <el-option v-for="group in dotoStore.groupList" :key="group" :label="group" :value="group" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否完成">
          <el-select v-model="form[3].value" :reserve-keyword="false" placeholder="请选择">
            <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否发版">
          <el-select v-model="form[4].value" :reserve-keyword="false" placeholder="请选择">
            <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否标记">
          <el-select v-model="form[5].value" :reserve-keyword="false" placeholder="请选择">
            <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目">
          <el-tag v-for="tag in form[2].value" :key="tag" class="mx-1" closable :disable-transitions="false"
            @close="projectTagClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
            @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
            + 项目
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryDoto">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="19">
      <el-row :gutter="10">
        <el-col :span="8" v-for="doto in dotoList">
          <CardVue :data="doto"></CardVue>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import CardVue from '@/components/Card.vue'
import { Card } from '@/types/card';
import { Query } from '@/types/query';
import { ElInput } from 'element-plus';
import { nextTick, onBeforeMount, reactive, ref } from 'vue';
import { useDotoStore } from '@/stores/dotoStore'

const dotoStore = useDotoStore()
onBeforeMount(() => {
  dotoStore.initGroupList()
})

// 表单数据
const form = reactive<Array<Query>>([
  {
    param: 'title',
    value: '',
    logic(obj: Card): boolean {
      if (!this.value) return true
      return obj.title.indexOf(this.value) !== -1
    }
  },
  {
    param: 'group',
    value: '',
    logic(obj: Card): boolean {
      if (!this.value) return true
      return obj.group === this.value
    }
  },
  {
    param: 'project',
    value: [],
    logic(obj: Card): boolean {
      const projectList = reactive<Array<String>>([])
      obj.project.map(project => {
        projectList.push(project.project)
      })
      for (let i = 0; i < this.value.length; i++) {
        if (!projectList.includes(this.value[i]))
          return false
      }
      return true
    }
  },
  {
    param: 'isFinish',
    value: '0',
    logic(obj: Card): boolean {
      if (obj.isFinish === undefined) return false
      if (this.value === '0') return true
      else if (this.value === '1') return !obj.isFinish
      else return obj.isFinish
    }
  },
  {
    param: 'isRelease',
    value: '0',
    logic(obj: Card): boolean {
      if (obj.isRelease === undefined) return false
      if (this.value === '0') return true
      else if (this.value === '1') return !obj.isRelease
      else return obj.isRelease
    }
  },
  {
    param: 'isFlag',
    value: '0',
    logic(obj: Card): boolean {
      if (obj.isFlag === undefined) return false
      if (this.value === '0') return true
      else if (this.value === '1') return !obj.isFlag
      else return obj.isFlag
    },
  }
])

// 项目tag
const inputVisible = ref<boolean>(false)
const inputValue = ref<string>('')
const InputRef = ref<InstanceType<typeof ElInput>>()
const projectTagClose = (tag: string) => {
  form[2].value.splice(form[2].value.indexOf(tag), 1)
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    form[2].value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

// 下拉框选项
const selects = [
  { label: '全部', value: '0' },
  { label: '未完成', value: '1' },
  { label: '已完成', value: '2' }
]

// 查询按钮
let dotoList = reactive<Array<Card>>(dotoStore.dotoList);
const queryDoto = () => {
  const len = dotoList.length
  for (let i = 0; i < len; i++) {
    dotoList.splice(0, 1)
  }
  dotoList.push(...dotoStore.queryByCondition(...form))
}
</script>